<template>
  <!-- 课程组件 -->
  <div class="item">
    <img style="width: 100%" :src="info.images" />
    <div class="title">
      {{ info.title }}
    </div>
    <div class="bottom">
      <span style="font-size: 14px; color: #ff9563">{{ info.type }}</span>
      <span style="font-size: 18px; font-weight: 900; color: #ccc"> · </span>
      <span style="font-size: 14px; color: #ccc">{{
        info.person | addPerson
      }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  filters: {
    addPerson(value) {
      return value + '人正在学习'
    },
  },
}
</script>

<style lang="scss" scoped>
.item {
  width: 243px;
  height: 290px;
  box-shadow: 1px 1px 3px #ccc;
  .title {
    width: 85%;
    margin: 15px auto;
    font-size: 16px;
  }
  .bottom {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
